<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="plugins/axios/axios.min.js"></script>
    <script src="plugins/vue/vue.js"></script>
</head>
<body>
<div id="app">
    <table border="1">
        <tr>
            <td>
                userid
                <select v-model="order.userId">
                    <option v-for="u in user" :value="u.id">
                        {{u.id}} {{u.username}}

                    </option>
            </select>
            </td>
            <td>名称<input type="text" v-model="order.name"></td>
            <td>价格<input type="text" v-model="order.price"></td>
            <td>数量<input type="text" v-model="order.num"></td>
            <td><button @click="add()" type="button">添加</button></td>

        </tr>
    </table>

    <script>
        new Vue({
            el:"#app",
            data:{
                order:{},
                user:[]
            },
            created(){
                this.userr()
            },
            methods:{
                add(){
                   axios.post("/order/add",this.order).then(res=>{
                       alert("添加成功")
                       this.order=res.data
                       location.href="index.html"
                   })
                },
                userr(){
                    axios.get("/order/alll").then(res=>{
                        this.user =res.data
                    })
                }

            }

        })
    </script>
</div>
</body>
</html>